<template>
	<!--  员工添加模块-->
	<view class="container">
	    <view class="example">
	      <uni-forms ref="form" :model="staffList" labelWidth="80px">
	        <uni-forms-item label="员工编码" name="staffCode">
	          <uni-easyinput v-model="staffList.staffCode" placeholder="请输入员工编码" />
	        </uni-forms-item>
	        <uni-forms-item label="员工名称" name="staffName">
	          <uni-easyinput v-model="staffList.staffName" placeholder="请输入员工名称" />
	        </uni-forms-item>
			<uni-forms-item label="员工年龄" name="staffAge">
			  <uni-easyinput v-model="staffList.staffAge" placeholder="请输入员工年龄" />
			</uni-forms-item>
			<uni-forms-item label="员工性别" name="staffSex" required>
			  <!-- 下拉框选择 -->
			  <uni-data-select
			   v-model="staffList.staffSex"
			   :localdata="staffSexs" 
			   @change="change">
			   </uni-data-select>
			</uni-forms-item>
	        <uni-forms-item label="员工类型" name="staffType" required>
				<!-- 下拉框选择 -->
				<uni-data-select
				 v-model="staffList.staffType"
				 :localdata="staffTypes" 
				 @change="change">
				 </uni-data-select>
	        </uni-forms-item>
		
			<uni-forms-item label="联系方式" name="staffPhone">
			  <uni-easyinput v-model="staffList.staffPhone" placeholder="请输入联系方式" />
			</uni-forms-item>	
			<uni-forms-item label="备注">
				<uni-easyinput type="textarea" v-model="staffList.remark" placeholder="请输入员工介绍" />
			</uni-forms-item>
	      </uni-forms>
	      <button type="primary" plain="true" @click="submit('form')">提交</button>
	    </view>
	  </view>
</template>

<script>
import { listStaff,getStaff,addStaff,updateStaff,delStaff } from "@/api/hmy/staff";

export default {
  name: "StaffAdd",
  dicts: ['hmy_staff_type','hmy_staff_sex'],
  data() {
    return {
      //员工编码备份
      copyStaffCoud:undefined,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 员工表格数据
      staffList: {
		  // staffCode: "",
		  // staffName: "",
		  // staffType: "",
		  // staffPhone: ""
	  },
	  staffTypes: [{
		  text: "操作员",
		  value: "1"
	  },{
		  text: "分娩工",
		  value: "2"
	  },{
		  text: "配种工",
		  value: "3"
	  },{
		  text: "物料管理员",
		  value: "4"
	  },{
		  text: "妊检",
		  value: "5"
	  }],
	  staffSexs: [{
	  		  text: "男",
	  		  value: "1"
	  },{
	  		  text: "女",
	  		  value: "2"
	  }],
      // 表单校验
      rules: {
        staffCode: {
			rules: [{
			   required: true,
			   errorMessage: '员工编码不能为空'
			}]
        },
        staffName: {
			rules: [{
			  required: true,
			  errorMessage: '员工名称不能为空'
			}]
        },
        staffPhone: {
			rules: [{
			  required: true,
			  errorMessage: '联系方式不能为空'
			}]
        },
        staffType: {
			rules: [{
			  required: true,
			  errorMessage: '员工类型不能为空'
			}]
        }
      }
    };
  },
  // onReady() {
  //   this.$refs.form.setRules(this.rules)
  // },
  methods: {
	change(e) {
		this.single = e
	},
	submit(form) {
	  this.$refs[form].validate().then(res => {
		addStaff(this.staffList).then(response => {
		  this.$modal.msgSuccess("新增成功")
		  setTimeout(()=>{
			this.$tab.navigateTo('/pages/hmy/staff/index');
		  },1000)
		  
		})
	  })
	},
    /** 提交按钮 */
    // submit(ref) {
    //     this.$refs.form.validate().then(res => {
    //         addStaff(this.staffList).then(response => {
    //            this.$modal.msgSuccess("新增成功")
    //         })
    //     })
    // }
  }
};
</script>

<style lang="scss">
	
  /* #ifndef APP-NVUE */
  page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 100%;
    height: auto;
  }

  view {
    font-size: 16px;
    line-height: inherit;
  }
  /* #endif */
  .code{
	margin-bottom :5px;
  }
  .icon{
	float:right;
	margin-right:10px;
	margin-top :5px;
  }
  .message{
	margin-top:5px;
	color: #989897;
	line-height: 25px;
  }

  
  .example {
    padding: 15px;
    background-color: #fff;
  }
  
  .segmented-control {
    margin-bottom: 15px;
  }
  
  .button-group {
    margin-top: 15px;
    display: flex;
    justify-content: space-around;
  }
  
  .form-item {
    display: flex;
    align-items: center;
    flex: 1;
  }
  
  .button {
    display: flex;
    align-items: center;
    height: 35px;
    line-height: 35px;
    margin-left: 10px;
  }
</style>

